<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>公司列表</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" href="/static/plugins/city-picker/city-picker.css"/>
	<link rel="stylesheet" type="text/css" href="/static/plugins/zTree/zTreeStyle/zTreeStyle.css"/>	
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">
		.input-inline-width{
			width: 420px!important;
		}
	</style>
</head>
<body class="body-container">
	<div>
		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm add-info-btn">添加子公司</button>
	</div>
			
	<!-- table表格数据 -->
	<div class="content-container">
		<table class="layui-hide" id="layerTable" lay-filter="layerTable"></table>
	</div>

	<script type="text/html" id="layuiTableToolbar">
  		<div class="layui-btn-container">
    				
  		</div>
	</script>
	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
	<script type="text/javascript" src="/static/plugins/city-picker/city-picker.data.min.js"></script>
	<script type="text/javascript" src="/static/plugins/city-picker/city-picker.min.js"></script>
	<script src="/static/plugins/zTree/js/jquery.ztree.all.min.js" type="text/javascript"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script type="text/javascript" th:inline="none">
		$(document).ready(function() {
			
			layui.table.reload('layerTable',{url:table_url,page:{curr:1}});
		})
		
		// table
		var table_url = '/companyInfo/selectList';	
		layui.use('table', function(){
	        var table = layui.table;
	        table.render({
	            elem: '#layerTable'	
	            //,url:'/sysRole/selectPageInfoList'
	          	//,toolbar: '#layuiTableToolbar'
	       		,title: '角色数据表'		
				,height:600
				,method:'post'
				,limit:10
				,limits:[10,20,30]
				,where: {}
	            ,request: {
	                pageName: 'currentPage' //页码的参数名称，默认：page
	                ,limitName: 'pageSize' 	//每页数据量的参数名，默认：limit
	            }
	            ,response: {		
	                statusName: 'code' 		//数据状态的字段名称，默认：code
	                ,statusCode: 200 		//成功的状态码，默认：0
	                ,msgName: 'msg' 		//状态信息的字段名称，默认：msg
	                ,countName: 'total'  	//数据总数的字段名称，默认：count
	                ,dataName: 'dataObject' //数据列表的字段名称，默认：data
				}	
	            ,cols: [[		
	            	{field:'companyName',width:240, title: '公司名称'}
	            	,{field:'statusCode',width:340, title: '区域信息',templet: 
	                	function(res){
	            		/* "province":"湖北省",
	                    "city":"武汉市",
	                    "district":"江夏区",
	                    "street":null,
	                    "address":"啦啦啦啦啦", */
	            		
	               			var html = "";
	               			if(res.province){
	               				html += res.province ;
	               			}
	               			if(res.city){
	               				html +=" / " + res.city ;
	               			}
	               			if(res.district){
	               				html +=" / " +  res.district ;
	               			}
							if(res.address){
								html +=" / " +  res.address ;
	               			}
	            			return html;
	                	}
	                }
	                ,{field:'createTime',width:240, title: '创建时间', sort: true,templet:'<div>{{ commonDateFormat(d.createTime,"yyyy-MM-dd hh:mm:ss")}}</div>'}
	                ,{field:'statusCode',width:180, title: '状态',templet: 
	                	function(res){	
	               			return getStatusCodeMsg(res.statusCode);	
	                	}
	                }
	                ,{field:'remark',width:280, title: '备注'}
	                ,{field:'right',title: '操作', templet: 
	                	function(res){		
		                	var html = "";	
	            			html += '<a class="layui-btn layui-btn-normal layui-btn-xs edit-info-btn" company-id="'+res.id+'">';
	            			html += '<i class="layui-icon layui-icon-edit"></i>编辑</a>';
	            			return html;	
	                	}
	                }	
	            ]]	
	            ,page: true
	            ,done: function(res, curr, count){	
	            	
	            }
	        });  
    	});
		
		// 添加按钮
		$(document).on('click', '.add-info-btn', function() {
			var index = layer.open({				
				type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: "添加子公司",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['70%', '60%'],		// 默认：'auto' 	自适应
				//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
				skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
				maxmin: true,
				resize:true,		
				shadeClose:false,					
				content:initAddInfoHtml(),					
				btn: ['立即添加','取消'], 	
				btn1: function(){			

				},
				btn2: function(){				
					layer.close(index);		
				},
				cancel: function(){ 

				},		
				success: function(layers){		
					$("#city-picker1").citypicker("reset");
					$("#city-picker1").citypicker("destroy");
					$("#city-picker1").citypicker({
						province: "",
						city: ""
					});		
					
					
					var form = layui.form;
					layers.addClass('layui-form');	
					layers.find('.layui-layer-btn0').attr('lay-filter', 'addInfoFrom').attr('lay-submit', '');//将按钮弄成能提交的
					form.render(); 	
					
					form.on('submit(addInfoFrom)', function (data) {	
						console.log(data);
						$.ajax({			
							url: '/companyInfo/addChildInfo', 				// 请求的url地址	
							dataType: 'json', 							// 返回格式为json	
							data: data.field,
							type: 'post', 								// 请求方式		
							async: false,	
							success: function (res) {
								if (res.code == 200) {
									layer.msg("添加成功");	
									layer.close(index);	
									layui.table.reload('layerTable', { page: { curr: 1 }, where: { } });					
								}else{			
									layer.msg(res.msg);	
								}
							},		
							error: function () {

							}
						});
						return false;
					});	

				}	
			});
		})
		
		// 添加角色 html
		function initAddInfoHtml(){
			var html = "";		
			html+='<div style="margin: 40px 20px;">';	
			html+='<form class="layui-form" action="">';
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">公司名称</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="tel" name="companyName" lay-verify="required" maxlength="38" placeholder="请输入子公司名称" autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='<div class="layui-form-mid layui-word-aux">公司名称不能重复</div>';
			html+='</div>';
			html+='</div>';
			
			html+='<div class="layui-form-item">';
			html+='<label class="layui-form-label zdy-required">省市区</label>';
			html+='<div class="layui-input-inline">';		
			html+='<div class="city-picker-area area">';  
			html+='<input id="city-picker1" class="form-control" style="display: none" readonly type="hidden" name="region" data-toggle="city-picker">';
			html+='</div>';
			html+='</div>';	
			html+='</div>';

			html+='<div class="layui-form-item layui-form-text">';
			html+='<label class="layui-form-label">详细地址</label>';
			html+='<div class="layui-input-inline">';							
			html+='<input type="text" name="address" lay-verify="required" autocomplete="off" class="layui-input zdy-i-w800" maxlength="45">';
			html+='</div>';	
			html+='</div>';	

			
			html+='<div class="layui-form-item layui-form-text">';	
			html+='<label class="layui-form-label">备注</label>';
			html+='<div class="layui-input-block">';							
			html+='<textarea name="remark" class="layui-textarea" placeholder="" style="height: 60px;width: 60%;min-height: 50px;" maxlength="88"></textarea>';		
			html+='</div>';	
			html+='</div>';	
			
			html+='</form>';
			html+='</div>';
			return html;
		}		
		
		// edit-menu-btn
		$(document).on('click', '.edit-info-btn', function() {
			var roleId = $(this).attr("company-id");
			var roleName = $(this).attr("role-name");
			var remark = $(this).attr("remark");
			var index = layer.open({				
				type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: "编辑角色",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['70%', '60%'],		// 默认：'auto' 	自适应
				//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
				skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
				maxmin: true,
				resize:true,		
				shadeClose:false,					
				content:initEditInfoHtml("",""),					
				btn: ['立即添加','取消'], 	
				btn1: function(){			

				},
				btn2: function(){				
					layer.close(index);		
				},
				cancel: function(){ 

				},		
				success: function(layers){		
					var form = layui.form;
					layers.addClass('layui-form');	
					layers.find('.layui-layer-btn0').attr('lay-filter', 'editInfoFrom').attr('lay-submit', '');//将按钮弄成能提交的
					form.render(); 	

					
					form.on('submit(editInfoFrom)', function (data) {	
							
						/* $.ajax({				
							url: '/sysRole/editInfo', 					// 请求的url地址	
							dataType: 'json', 							// 返回格式为json	
							data: data.field,
							type: 'post', 								// 请求方式		
							async: false,	
							success: function (res) {
								if (res.code == 200) {
									layer.msg("添加成功");	
									layer.close(index);	
									layui.table.reload('layerTable', { page: { curr: 1 }, where: { } });					
								}else{			
									layer.msg(res.msg);	
								}
							},		
							error: function () {

							}
						});
						return false; */
					});	

				}	
			});
		})
		
		// 添加角色 html
		function initEditInfoHtml(roleName,remark){
			var html = "";		
			html+='<div style="margin: 40px 20px;">';	
			html+='<form class="layui-form " action="">';
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">角色名称</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="tel" name="roleName" lay-verify="required" maxlength="14" placeholder="请输入角色名称" autocomplete="off" class="layui-input" value='+roleName+'>';
			html+='</div>';
			html+='</div>';	
			html+='</div>';
			
			html+='<div class="layui-form-item layui-form-text">';	
			html+='<label name="description" class="layui-form-label">备注</label>';
			html+='<div class="layui-input-block">';							
			html+='<textarea name="remark" class="layui-textarea" placeholder="" style="height: 60px;width: 80%;min-height: 50px;">'+remark+'</textarea>';		
			html+='</div>';	
			html+='</div>';	
			
			// 菜单权限列表
			html+='<div class="layui-form-item">';		
			html+='<label class="layui-form-label zdy-required">菜单列表</label>';	
			html+='<div class="layui-input-inline">';		
			html+='<ul id="menuZtreeId" class="ztree"></ul>';
			html+='</div>';
			html+='</div>';
			html+='</form>';
			html+='</div>';
			return html;
		}
		
	</script>
</body>
</html>